<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <title>ReaderLogin</title>
        <link href="/css/styles.css" rel="stylesheet" />
        <link rel="icon" href="/assets/img/logo.ico" type="image/x-icon"/>
        <link rel="bookmark" href="/assets/img/logo.ico" type="image/x-icon"/>
        <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </head>
    <body class="bg-primary">
        <div id="layoutAuthentication">
            <div id="layoutAuthentication_content">
                <main>
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-lg-5">
                                <div class="card shadow-lg border-0 rounded-lg mt-5">
                                    <div class="card-header"><h3 class="text-center font-weight-light my-4">用户登陆</h3></div>
                                    <div class="card-body">
                                        <form action="/reader/login" method="post" id="loginForm">
                                            <div class="form-floating mb-3">
                                                <input class="form-control" id="inputreadID" required type="text" placeholder="readId" name="readId"/>
                                                <label for="inputreadID">readId</label>
                                            </div>
                                            <div class="form-floating mb-3">
                                                <input class="form-control" id="inputPassword" required type="password" placeholder="Password" name="password"/>
                                                <label for="inputPassword">Password</label>
                                            </div>
                                            <div class="row mb-3">
                                                <div class="col-md-6">
                                                    <div class="form-floating mb-3 mb-md-0">
                                                        <input class="form-control" id="inputCaptcha" required type="text" placeholder="Captcha" name="Captcha"/>
                                                        <label for="inputCaptcha">Captcha</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-floating mb-3 mb-md-0">
                                                        <img onclick = "this.src='/captcha?d='+new Date()*1" src="/captcha" style="width: 200px;height: 55px">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-check mb-3">
                                                <input class="form-check-input" id="inputRememberPassword" type="checkbox" value="" />
                                                <label class="form-check-label" for="inputRememberPassword">记住密码</label>
                                            </div>
                                            <div class="d-flex align-items-center justify-content-between mt-4 mb-0">
                                                <a class="small" href="/admin/adminloginHtml">管理员登录</a>
                                                <input class="btn btn-primary" type="submit" id="loginButton" value="登录" />
                                            </div>
                                        </form>
                                    </div>
                                    <div class="card-footer text-center py-3">
                                        <div class="small">
                                            <a href="/reader/registerHtml">注册账户</a>
                                            <span class="separator">|</span>
                                            <a href="/reader/forgetPassHtml">忘记密码</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
            <div id="layoutAuthentication_footer">
                <footer class="py-4 bg-light mt-auto">
                    <div class="container-fluid px-4">
                        <div class="d-flex align-items-center justify-content-between small">
                            <div class="text-muted">Copyright &copy; Your Website 2024</div>
                            <div>
                                <a href="#">隐私政策</a>
                                &middot;
                                <a href="#">条款和条件</a>
                            </div>
                        </div>
                    </div>
                </footer>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
        <script src="/js/scripts.js"></script>
        <script src="/js/readerLogin.js"></script>
    </body>
</html>
